import React from 'react';
import { List, Descriptions } from 'antd';

import './OtherUserShare.scss';
import { listBookInfo } from '../../../api/bookInfo';
import { FormInstance } from 'antd/lib/form';
import { getUserById } from '../../../api/user';
import { Link } from 'react-router-dom';

class OtherUserShare extends React.Component {
  state = {
    userId: 0,
    user: {},
    listData: [],
    pagination: {
      current: 1,
      pageSize: 2,
      total: 1,
      showTotal: (total) => `总 ${total} 条`,
      hideOnSinglePage: false
    },
    searchParams: {}
  };
  formRef = React.createRef(FormInstance);

  constructor(props) {
    super(props);
    const { match } = props;
    const userId = match.params.id;

    this.state = {
      userId,
      user: {},
      listData: [],
      pagination: {
        current: 1,
        pageSize: 2,
        total: 1,
        showTotal: (total) => `总 ${total} 条`,
        hideOnSinglePage: false,
      },
      searchParams: {
        sortField: 'create_time',
        order: 'desc',
        ownerUserId: userId
      }
    };

    getUserById(userId).then(({ data: user }) => {
      this.setState({
        user
      });
    }).catch((e) => {
      console.log(e, typeof e, 'getUserById e');
    });
  }

  componentDidMount() {
    this.getListData(1, 2);
  }

  getListData = (pageNum, pageSize) => {
    const { searchParams, pagination } = this.state;
    listBookInfo(pageNum, pageSize, searchParams).then(({ data }) => {
      const { list, total, pageNum, pageSize } = data;
      Object.assign(pagination, {
        total,
        current: pageNum,
        pageSize
      });

      this.setState({
        listData: list,
        pagination
      });
    }).catch((e) => {
      console.log(e, typeof e, 'listBookInfo e');
    });
  };

  paginationOnChange = (pageNum, pageSize) => {
    this.getListData(pageNum, pageSize);
  };

  render() {
    const { listData, pagination, user } = this.state;

    const renderItem = (item) => (
      <List.Item
        className="book-list-item"
        key={item.isbn}
        extra={
          <img
            width={200}
            alt="logo"
            src={'http://localhost:8077/bookSharing/common/image?fileName=' + item.coverImage}
          />
        }
      >
        <List.Item.Meta
          title={
            <div className="list-item-title">
              <Link to={`/user/book/detail/${item.id}`}>{item.name}</Link>
              <span className="item-isbn">ISBN: {item.isbn}</span>
            </div>
          }
          description={item.description}
        />
        <pre className="content">{item.desc}</pre>
        <div className="footer">
          <span>分享时间：{item.createTime}</span>
          <span className={'borrowed-state ' + (item.borrowed ? 'borrowed' : '')}>
            {item.borrowed ? '已借阅出'
              : (<Link to={`/user/book/detail/${item.id}`}>可借阅</Link>)}
          </span>

        </div>
      </List.Item>
    );

    return (
      <div className="other-user-share-container">
        <div className="user-detail-container">
          <Descriptions
            bordered
            title="书籍拥有者用户信息"
            column={2}
          >
            <Descriptions.Item label="拥有者姓名:">{user.username}</Descriptions.Item>
            <Descriptions.Item label="email:">{user.email}</Descriptions.Item>
            <Descriptions.Item label="手机号:">{user.phone}</Descriptions.Item>
            <Descriptions.Item label="注册时间:">{user.createTime}</Descriptions.Item>
          </Descriptions>
        </div>
        <div className="user-share-list">
          <h1>他的分享：</h1>
          <List
            pagination={{
              ...pagination,
              onChange: this.paginationOnChange,
            }}
            itemLayout="vertical"
            dataSource={listData}
            renderItem={renderItem}
          />
        </div>
      </div>
    );
  }
}

export default OtherUserShare;
